<template>
  <div id="change-name">
    <div class="circle"></div>
    <group>
        <x-input type='text' name="username" ref="nameval" v-model="value"  @on-change="changeval" :max="17" placeholder="请输入姓名" is-type="china-name"></x-input>
    </group>
    <P>还剩<span v-html="number"></span>个字可输入</P>
    <div class="share" @click="soult">确定</div>
  </div>
</template>
<script>
import { XInput, Group } from 'vux'
import utils from '../../utils'
import api from '../../api'
export default {
  data () {
    return {
      number: 17,
      value: ''
    }
  },
  components: {
    XInput,
    Group
  },
  created () {
    window.document.title = '修改姓名'
    utils.jssdkwx(api, this.$wechat, this.$store)
  },
  methods: {
    changeval (val) {
      var txtVal = this.value.length
      var num = 17
      if (txtVal <= 17) {
        this.number = num - txtVal
      }
    },
    soult () {
      if (this.$refs.nameval.valid === false || this.value === '') {
        this.$vux.toast.show({
          text: '请检查输入',
          type: 'warn',
          width: '4rem'
        })
      } else {
        var timeStamp = String(Number(new Date()))
        var tokenval = utils.AuthToken(timeStamp, this.$store.state.userkey)
        api.changename({
          token: tokenval,
          timestamp: timeStamp,
          userId: this.$store.state.userID,
          userName: this.value
        }).then(res => {
          console.log(res)
          if (res.status === '200') {
            this.$router.push('/center/setting')
          } else {
             this.$vux.toast.show({
              text: res.message,
              type: 'warn',
              width: '4rem'
            })
          }
        })
      }
    }
  }
}
</script>
